<template>
  <div class="inputAddress">
    <ul>
      <li>
        <div class="inputAddress-name">姓名</div>
        <input class="inputAddress-input" placeholder='姓名' v-model="consignee"/>
      </li>
      <li>
        <div class="inputAddress-name">电话</div>
        <input class="inputAddress-input" placeholder='电话' v-model="phone"/>
      </li>
      <li >
        <div class="inputAddress-name">地区</div>
         <picker mode="region" :value="region" @change="regionChange" class="area_wrapper">
          <div class="picker" style="line-height:30px;margin:10px 10px;min-width:200px;">
            {{region[0]}}{{region[1]}}{{region[2]}}
          </div>
        </picker>
      </li>
      <li>
        <div class="inputAddress-name">详细地址</div>
        <input class="inputAddress-input" placeholder='详细地址' v-model="add_detail"/>
      </li>
      <li>
        <div class="inputAddress-name">邮政编码</div>
        <input class="inputAddress-input" placeholder='邮政编码' v-model="postcode"/>
      </li>
      <li>
        <div class="inputAddress-name" style="width:140px;">是否设为默认地址</div>
        <checkbox-group class="radio-group" @change="radioChange">
          <checkbox value="1" :checked="selectFlag" style="margin-top:15px;"/>
        </checkbox-group>
      </li>
    </ul>
    <div class="inputAddress-btnSave" @click="saveAddress">保存</div>
    <div class="inputAddress-btnDel" @click="delAddress" v-if="id==undefined ?false:true">删除</div>
    <!-- <div></div> -->
  </div>
</template>

<script>


export default {
  components: {
    
  },

  data () {
    return {
      region: [],
      consignee:"",
      phone:"",
      add_detail:"",
      postcode:"",
      is_default:0, 
      id:"",//如果是修改收货地址的时候，会传入一个id
      orderId:"",  //订单号
    }
  },
  computed: {
    selectFlag(){
      if(this.is_default==0){
        return false
      }else{
        return true
      }
    }
  },
  methods:{
    radioChange(e){
      this.is_default=e.target.value[0]
    },
    regionChange(e){
      this.region=e.target.value
    },
    async delAddress(){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/ucenter/deleteShippingAddress',{id:this.id,user_token:userToken})
      this.$currency.showToast(res.data.message)
      setTimeout(()=>{
        if(res.data.level=='success'){
          wx.navigateBack({delta:1})
        }
      },1500)
    },
    async saveAddress(){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/ucenter/newShippingAddress',{user_token:userToken,consignee:this.consignee,phone:this.phone,province:this.region[0],city:this.region[1],area:this.region[2],add_detail:this.add_detail,postcode:this.postcode,is_default:this.is_default,id:this.id})
      this.$currency.showToast(res.data.message)
      setTimeout(()=>{
        if(res.data.level=='success'){
          wx.navigateBack({delta:1})
        }
      },1500)
      
    },
    async getAddressDetails(id){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.getData('/ucenter/getShippingAddress',{user_token:userToken,id:id})
      let data=res.data.data[0]
      this.consignee=data.consignee
      this.phone=data.phone
      this.add_detail=data.add_detail
      this.postcode=data.postcode
      this.is_default=data.is_default
      this.region[0]=data.province
      this.region[1]=data.city
      this.region[2]=data.area
    }
  },
  onLoad(options){ //如果是修改收货地址的时候，会传入一个id
    if(options.id!=undefined){
      this.id=options.id
      this.getAddressDetails(options.id)
    }else{
      this.id=''
      this.consignee=''
      this.phone=''
      this.add_detail=''
      this.postcode=''
      this.is_default=''
      this.region=[]
    }
    this.orderId=options.orderId
  }
}
</script>

<style scoped lang="scss" type="text/css">
  .inputAddress{
    width:100%;
    div{
      width:80px;
    }
    li{
      display:flex;
      height:50px;
      background-color:#fff;
      border-top:1px solid #eee;
      color:black;
      .area_wrapper{
        flex:1;
        height:100%;
        div{
          height: 50px;
          line-height:30px;
          margin:0px 10px;
          min-width:200px;
        }
      }
    }
    &-name{
      width:70px;
      line-height:50px;
      text-indent:10px;
      // color:white;
    }
    &-input{
      flex:1;
      height:30px;
      margin:10px 10px;
      line-height:30px;
    }
    .inputAddress-btnSave{
      width:90%;
      line-height:50px;
      background-color:red;
      border-radius:10px;
      text-align:center;
      color:#fff;
      margin:50px 5% 20px;
    }
    &-btnDel{
      @extend .inputAddress-btnSave;
      background-color:gray !important;
      margin:0px 5% 0px !important;
    }
  }
</style>
